<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>front-end technology talk</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="manifest" href="/manifest.json"></link>
<meta name="theme-color" content="dodgerblue">
<meta name="description" content="Blog with articles on all things web development: CSS, JS, Node, HTML, A11Y">
<meta name="keywords" content="Web, Web Ops, DevOps, Performance, Front-End, JavaScript, CSS">


<style>
*{box-sizing:border-box}*:after,*:before{box-sizing:inherit}html{font-size:16px}body{font-weight:300;font-size:1rem;line-height:1.5em;font-family:"Fira Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";color:#454545;margin:0}@media (min-width: 40em){html{font-size:18px}}a,a:visited{color:#03A678;color:var(--main-color, #03A678);text-decoration:none}a:focus,a:hover{color:#04d89c;color:var(--highlight-color, #04d89c)}h1{font-size:1.7rem}h1,h2,h3,b,strong{font-weight:500}.wrapper h1{line-height:1.2em}h1,h2,h3,h4,h5{margin-top:1.75em}img{max-width:100%}code{font-family:'Monaco', monospace;font-size:0.8rem}ol{padding-left:1.4rem}ol li{padding-left:0.5rem}ul{padding-left:1.1rem}figure{margin:1rem 0 1rem -1rem;width:calc(100% + 2rem)}figcaption{margin-left:1rem;margin-right:1rem;font-style:italic}@media (min-width: 800px){figure{margin:2rem 0 2rem -2rem;width:calc(100% + 4rem)}figcaption{margin-left:2rem;margin-right:2rem}}.categories{font-size:0.8em;color:#666}.wrapper{position:relative;margin-left:auto;margin-right:auto;background-color:white;color:#454545;padding:1rem;max-width:53em;padding-bottom:2rem;min-height:calc(100vh - 47px)}@media (min-width: 50em){.wrapper{padding:1rem 5rem 1rem}}@media (min-width: 85em){.wrapper{margin-left:0;margin-top:-1rem}}.aspect{position:relative;width:100%;height:0;margin:1em 0;overflow:hidden}.aspect.ratio-16-to-9{padding-bottom:56.25%}.aspect.ratio-4-to-3{padding-bottom:75%}.aspect>*{position:absolute;top:0;left:0;width:100%;height:100%}.highlight{margin:1rem -1rem;padding:0 1rem;overflow:auto;color:#fafafa;background-color:#454545}@media (min-width: 50em){.highlight{width:calc(100% + 10rem);margin:1rem -5rem;padding:0 5rem}}.note{background-color:#f7dc6f;padding:1rem;margin:1rem -1rem 0}@media (min-width: 50em){.note{width:calc(100% + 10rem);margin:1rem -5rem 0;padding:1rem 5rem}}@media (min-width: 85em){.note{margin-top:0}}.main-header{position:relative;margin-left:auto;margin-right:auto;max-width:53em;text-align:center;text-transform:lowercase}@media (min-width: 85em){.main-header{position:fixed;left:53rem;height:100vh;padding:4rem;font-weight:300;width:100%;text-align:left;margin-left:0;border-left:1px solid rgba(0,0,0,0.1);top:0;z-index:2;background-color:white}}.main-nav{list-style-type:none;margin:0;padding:0}.nav-item{line-height:2em;display:block;transition:all 0.3s ease;padding:0 1rem;margin:0 -1rem}.nav-item:hover,.nav-item:focus{background-color:#03A678;background-color:var(--main-color, #03A678);color:white}.main-title{font-weight:300;color:#03A678;color:var(--main-color, #03A678)}@media (max-width: 85em){.main-nav{display:flex;justify-content:center;width:100%;flex-wrap:wrap}.nav-item{padding:0 0.5rem;margin:0}}.paging{position:relative;list-style-type:none;margin:1rem 0 0;padding:0;max-width:53em;display:flex;background-color:#03A678;background-color:var(--main-color, #03A678);color:white;margin-left:auto;margin-right:auto}.paging-item{flex:1 0 50%;padding:0}.paging-link,.paging-link:visited{padding:1rem;display:block;color:white;transition:all 0.3s ease;height:100%}.paging-link:hover,.paging-link:focus{background-color:white;color:#03A678;color:var(--main-color, #03A678)}.link-prev:before{content:'Previous: '}.link-next:before{content:'Next: '}@media (min-width: 85em){.paging{margin-left:0;padding-left:4rem}}.post-title a[href^=http]:before{content:'\279e  '}.post-date{font-size:0.8rem;color:#666;margin-top:-0.7em}.read-more:before{content:'\279e  '}.highlight .c{color:#998;font-style:italic}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#998}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#998;font-weight:bold;font-style:italic}.highlight .gd{color:red}.highlight .gd .x{color:#000;background-color:#faa}.highlight .ge{font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#998}.highlight .gi{color:limegreen}.highlight .gi .x{color:#000;background-color:#afa}.highlight .go{color:#888}.highlight .gp{color:#998}.highlight .gu{color:#aaa}.highlight .gt{color:#a00}.highlight .k,.highlight .kd,.highlight .kr,.highlight .kt{color:#66d9ef}.highlight .m{color:#e6db74}.highlight .s{color:#e6db74}.highlight .na{color:#66d9ef}.highlight .nb{color:#0086B3}.highlight .nc{color:#fe0000}.highlight .no{color:#66d9ef}.highlight .ni{color:purple}.highlight .ne{color:#fe0000}.highlight .nf{color:#fe0000}.highlight .nn{color:#998}.highlight .nt{color:#fff}.highlight .nv{color:#66d9ef}.highlight .w{color:#bbb}.highlight .mf{color:#e6db74}.highlight .mh{color:#e6db74}.highlight .mi{color:#e6db74}.highlight .mo{color:#e6db74}.highlight .sb{color:#e6db74}.highlight .sc{color:#e6db74}.highlight .sd{color:#e6db74}.highlight .s2{color:#e6db74}.highlight .se{color:#e6db74}.highlight .sh{color:#e6db74}.highlight .si{color:#e6db74}.highlight .sx{color:#e6db74}.highlight .s1{color:#e6db74}.highlight .ss{color:#990073}.highlight .bp{color:#998}.highlight .vc{color:#66d9ef}.highlight .vg{color:#66d9ef}.highlight .vi{color:#66d9ef}.highlight .il{color:#e6db74}.appearances{list-style-type:none;margin:0;padding:0}.appearance__date{font-size:0.8rem;color:grey;display:block}.appearance__detail{padding:1rem 0}.appearance__detail+.appearance__detail{border-top:1px solid lightgray}.talks{list-style-type:none;padding:0}.talk__entry:before{content:'Talk: ';color:grey}.talk--workshop:before{content:'Workshop: '}.talk__coverage+.talk__coverage:before{content:'| ';color:#454545}.talk__coverage+.talk__coverage:before:hover,.talk__coverage+.talk__coverage:before:active,.talk__coverage+.talk__coverage:before:visited{color:#454545}.talk__entry{padding-left:0}.foot{font-size:0.7rem;color:white;background-color:#454546;padding:0.1rem 1rem}.foot a,.foot a:visited{color:white;font-weight:bold;text-decoration:underline}.foot a:hover{color:#eee}@media (min-width: 50em){.foot{padding:0.1rem 3rem}}@media (min-width: 85em){.foot{margin-right:3rem}}.visually-hidden{visibility:hidden;position:absolute}.theme-blue{--main-color: #007ACC;--highlight-color: #0099ff}#carbonads{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif}#carbonads{display:flex;max-width:330px;background-color:#fafafa;box-shadow:0 1px 4px 1px rgba(0,0,0,0.1)}#carbonads a{color:inherit;text-decoration:none}#carbonads a:hover{color:inherit}#carbonads span{position:relative;display:block;overflow:hidden}#carbonads .carbon-wrap{display:flex}.carbon-img{display:block;margin:0;line-height:1}.carbon-img img{display:block}.carbon-text{font-size:13px;padding:10px;line-height:1.5;text-align:left}.carbon-poweredby{display:block;padding:8px 10px;background:repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0,0,0,0.025) 5px, rgba(0,0,0,0.025) 10px) rgba(241,243,244,0.4);text-align:center;text-transform:uppercase;letter-spacing:.5px;font-weight:600;font-size:9px;line-height:1}@media (min-width: 50em){#carbonads{float:right;margin-left:1rem;margin-bottom:1rem}}@media (min-width: 85em){#carbonads{position:fixed;left:57rem;float:none;top:550px;z-index:1000;margin-left:0;margin-bottom:0}}

</style>

<link rel="alternate" type="application/rss+xml" title="front-end technology talk &raquo; Updates" href="https://fettblog.eu/atom.xml">

<link rel="pingback" href="https://webmention.io/fettblog.eu/xmlrpc">
<link rel="webmention" href="https://webmention.io/fettblog.eu/webmention">
<link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/icon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/icon/favicon-16x16.png" sizes="16x16">
</head>
<body>
<header class="main-header">
<h1 class="main-title">Stefan Baumgartner</h1>
<p>Web ops, performance and front-end</p>
<nav>
<ul class="main-nav">
<li><a href="/" class="nav-item">Home</a></li>
<li><a href="/contact/" class="nav-item">About</a></li>
<li><a href="/speaking/" class="nav-item">Speaking</a></li>
<li><a href="/typescript-react/" class="nav-item">Typescript + React</a></li>
<li><a href="https://scriptconf.org" class="nav-item">ScriptConf</a></li>
<li><a href="https://www.manning.com/books/front-end-tooling-with-gulp-bower-and-yeoman/?a_aid=fettblog&a_bid=238ac06a" class="nav-item">My Gulp book</a></li>

<li><a href="https://twitter.com/ddprrt" class="nav-item">Twitter</a></li>
</ul>
</nav>
</header>
<section class="wrapper">
<h1 class="visually-hidden">List of articles</h1>
<article class="post">
<h2 class="post-title"><a href="/boolean-in-javascript-and-typescript/">Boolean in JavaScript and TypeScript</a></h2>
<div class="post-date">10 September 2019</div>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7DT2JM&placement=fettblogeu" id="_carbonads_js"></script>
<p><code class="language-plaintext highlighter-rouge">boolean</code> is a fun primitive data type in JavaScript. In TypeScript, it allows for a total of four values
Wait, four?</p>
<p><a class="read-more" href="/boolean-in-javascript-and-typescript/">Read more</a></p>
</article>
<article class="post">
<h2 class="post-title"><a href="/void-in-javascript-and-typescript/">void in JavaScript and TypeScript</a></h2>
<div class="post-date">06 September 2019</div>
<p>If you come from traditional, strongly typed languages you might be familiar with the concept
of <code class="language-plaintext highlighter-rouge">void</code>: A type telling you that functions and methods return nothing when called.</p>
<p><a class="read-more" href="/void-in-javascript-and-typescript/">Read more</a></p>
</article>
<article class="post">
<h2 class="post-title"><a href="/symbols-in-javascript-and-typescript/">Symbols in JavaScript and TypeScript</a></h2>
<div class="post-date">04 September 2019</div>
<p><code class="language-plaintext highlighter-rouge">symbol</code> is a primitive data type in JavaScript and TypeScript, which, amongst other things,
can be used for object properties. Compared to <code class="language-plaintext highlighter-rouge">number</code> and <code class="language-plaintext highlighter-rouge">string</code>, <code class="language-plaintext highlighter-rouge">symbol</code>s have some unique
features that make them stand out.</p>
<p><a class="read-more" href="/symbols-in-javascript-and-typescript/">Read more</a></p>
</article>
<article class="post">
<h2 class="post-title"><a href="/why-i-use-typescript/">Why I use TypeScript</a></h2>
<div class="post-date">28 August 2019</div>
<p>You might well see that my blog starts to center around TypeScript a lot recently. This might look
like a strong deviation from what I usually blog and advocate: Performant, accessible and resilient
web sites.</p>
<p><a class="read-more" href="/why-i-use-typescript/">Read more</a></p>
</article>
<article class="post">
<h2 class="post-title"><a href="/typescript-react-extending-jsx-elements/">TypeScript + React: Extending JSX Elements</a></h2>
<div class="post-date">27 August 2019</div>
<p>React typings for TypeScript come with lots of interfaces for all possible HTML elements
out there. But sometimes, your browsers, your frameworks or your code are a little bit ahead of
what’s possible.</p>
<p><a class="read-more" href="/typescript-react-extending-jsx-elements/">Read more</a></p>
</article>
<article class="post">
<h2 class="post-title"><a href="/typescript-validate-mapped-types-and-const-context/">TypeScript: Validate mapped types and const context</a></h2>
<div class="post-date">26 August 2019</div>
<p>Mapped types are great, as they allow for the flexibility in object structures JavaScript is known for.
But they have some crucial implications on the type system. Take this example:</p>
<p><a class="read-more" href="/typescript-validate-mapped-types-and-const-context/">Read more</a></p>
</article>
<article class="post">
<h2 class="post-title"><a href="/typescript-match-the-exact-object-shape/">TypeScript: Match the exact object shape</a></h2>
<div class="post-date">19 August 2019</div>
<p>TypeScript is a structural type system. This means as long as your data structure satisfies a contract,
TypeScript will allow it. Even if you have too many keys declared.</p>
<p><a class="read-more" href="/typescript-match-the-exact-object-shape/">Read more</a></p>
</article>
<article class="post">
<h2 class="post-title"><a href="/typescript-interface-constructor-pattern/">TypeScript: The constructor interface pattern</a></h2>
<div class="post-date">15 August 2019</div>
<p>If you are doing traditional OOP with TypeScript, the structural features of TypeScript might
sometimes get in your way. Look at the following class hierachy for instance:</p>
<p><a class="read-more" href="/typescript-interface-constructor-pattern/">Read more</a></p>
</article>
<article class="post">
<h2 class="post-title"><a href="/streaming-your-meetup-part-4-obs/">Streaming your Meetup - Part 4: Directing and Streaming with OBS</a></h2>
<div class="post-date">06 August 2019</div>
<p>Now that we have everything wired up, it’s time to record, direct and stream!
If you missed the previous parts, check out the table of contents to quickyl jump to a previous
section.</p>
<p><a class="read-more" href="/streaming-your-meetup-part-4-obs/">Read more</a></p>
</article>
<article class="post">
<h2 class="post-title"><a href="/streaming-your-meetup-part-3-audio/">Streaming your Meetup - Part 3: Speaker audio</a></h2>
<div class="post-date">30 July 2019</div>
<p>We successfully set up the projector in the <a href="/streaming-your-meetup-part-1-projector/">first chapter</a>.
We are able to record the speaker’s video as described in the <a href="/streaming-your-meetup-part-2-video/">second chapter</a>.
Now let there be sound!</p>
<p><a class="read-more" href="/streaming-your-meetup-part-3-audio/">Read more</a></p>
</article>
</section>
<nav class="navigation-wrapper">
<ul class="navigation paging">
<li class="paging-item next"><a class="paging-link" rel="next" href="/blog/page/2">Previous articles</a></li>
</ul>
</nav>
<footer class="foot">
<p>Got any questions? Hit me up on <a href="https://twitter.com/ddprrt">Twitter</a> | <a href="/archive">Archive</a></p>
</footer>
<script async>
if (navigator.serviceWorker && navigator.serviceWorker.controller) {
  console.log('[PWA Builder] active service worker found, no need to register')
} else if(navigator.serviceWorker) {
  //Register the ServiceWorker
  navigator.serviceWorker.register('/pwabuilder-sw.js', {
    scope: '/'
  }).then(function(reg) {
    console.log('Service worker has been registered for scope:'+ reg.scope);
  });
}
</script>
</body>
</html>
